<!DOCTYPE html>
<html>

<head>
    <title> new document6666 </title>
    <meta charset="utf-8" />
    <style>
        .prompt {
            display: none;
            color: red;
        }
    </style>

</head>

<body>

    <form>
        <table>
            <tr>
                <td>昵称：</td>
                <td><input type="text" id="user" required>
                </td>

            </tr>
            <tr class="prompt" id="user_pro">
                <td></td>
                <td><span class="text">您的内容不能为空</span></td>

            </tr>
            <tr>
                <td>手机号码：</td>
                <td><input type="text" id="iphone" required pattern="^\s*1[3|4|5|7|8]\d{9}\s*$"></td>
            </tr>
            <tr class="prompt" id="iphone_pro">
                <td></td>
                <td><span class="text"></span>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <select id="sex" required>
                        <option value="女" selected>女</option>
                        <option value="男">男</option>
                    </select></td>
            </tr>
            <tr>
                <td>生日：</td>
                <td><input type="date" id="birthday"></td>
            </tr>

            <tr>
                <td>email：</td>
                <td><input type="email" id="mail" pattern="^\s*\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+\s*$"></td>
            </tr>
            <tr class="prompt" id="mail_pro">
                <td></td>
                <td><span class="text"></span>
                </td>
            </tr>
            <tr><input type="submit" value="注册" id=""></tr>
        </table>
    </form>
    <!-- </fieldset> -->
    <script>
        var user = document.getElementById("user");
        var user_pro = document.getElementById("user_pro");
        var user_text = user_pro.getElementsByClassName("text")[0];
        user.onfocus = function() {
            user_pro.style.cssText = "display:none";
        }
        user.onblur = function userFun() {
            console.log("1");
            user_pro.style.cssText = "display:none";
            if (user.validity.valid) {
                var userVal = user.value.trim();
                console.log(userVal);
                return userVal;
            } else if (user.validity.valueMissing) {
                user_pro.style.cssText = "display:block";
                user_text.innerHTML = "昵称不能为空";
            }
            // else if (user.validity.customError) {
            //     user.setCustomValidity("");
            // }
        }


        var iphone = document.getElementById("iphone");
        var iphone_pro = document.getElementById("iphone_pro");
        var iphone_text = iphone_pro.getElementsByClassName("text")[0];
        iphone.onfocus = function() {
            iphone_pro.style.cssText = "display:none";
        }
        iphone.onblur = function userFun() {
            console.log("2");
            iphone_pro.style.cssText = "display:none";
            if (iphone.validity.valid) {
                var iphoneVal = iphone.value.trim();

                console.log(iphoneVal);
                // return iphoneVal;
            } else if (iphone.validity.valueMissing) {
                iphone_pro.style.cssText = "display:block";

                iphone_text.innerHTML = "您的电话号码不能为空";
            } else if (iphone.validity.patternMismatch) {
                iphone_pro.style.cssText = "display:block";
                iphone_text.innerHTML = "请输入正确的电话号码";
            }
        }


        var mail = document.getElementById("mail");
        var mail_pro = document.getElementById("mail_pro");
        var mail_text = mail_pro.getElementsByClassName("text")[0];
        mail.onfocus = function() {
            mail_pro.style.cssText = "display:none";
        }
        mail.onblur = function() {
            console.log(mail.validity);
            if (mail.validity.valid) {
                var mailVal = mail.value.trim(); /***********mail result******/
                console.log(mailVal);
            } else if (mail.validity.patternMismatch) {
                mail_pro.style.cssText = "display:block";
                mail_text.innerHTML = "请输入正确格式的邮箱";
            }
        }
    </script>
</body>

</html>